<template>
	<view>
		<!-- 头部 -->
		<view class="top">
			<!-- 返回首页 -->
			<image class="home" src="../../static/assets/home.png" mode="" @click="tohome"></image>
			<!-- 选择城市 -->
			<text class="choosecity" @click="tochooseCity">北京</text>
			<!-- 搜索框 -->
			<input type="text" value="" placeholder="请输入区域/小区搜索公寓"/>
			<image src="../../static/assets/person2.png" class="personal" mode=""></image>
		</view>
		<!-- 列表部分 -->
		<view class="list">
			<block v-for="item in apartments.result.good_shops" v-bind:key="item.company_shop_id">
				<view class="item">
					<navigator class="go" :url="'../apartmentDetail/apartmentDetail?id='+encodeURIComponent(item.company_shop_id)">进店</navigator>
					<view class="logo">
						<image :src="item.logo_url" mode=""></image>
					</view>
					<view class="content">
						<view class="title">{{item.shop_name}}</view>
						<view class="des">{{item.address}}</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {gongyulist} from "../../data/apartment.js"
	export default {
		data() {
			return {
				apartments:gongyulist,
			}
		},
		methods: {
			tohome(){
				uni.switchTab({
					url:"../index/index"
				})
			},
			// 点击跳转至公寓详情 携带参数
			toDetail(id){
				uni.navigateTo({
					url:"../apartmentDetail/apartmentDetail?id="+encodeURIComponent(id)
				})
			},
			tochooseCity(){
				uni.navigateTo({
					url:"../choosecity/choosecity"
				})
			}
		},
		onLoad() {
		}
	}
</script>

<style lang="scss">
// 头部
.top{
	display: flex;
	align-items: center;
	// justify-content: space-around;
	height: 120rpx;
	width: 100%;
	background-color: #6A6DA9;
	image{
		width: 75rpx;
		height:75rpx;
	}
	.home{
		margin-left: 8rpx;
	}
	.personal{
		margin-left: 40rpx;
	}
	.choosecity{
		line-height: 40rpx;
		padding: 0 30rpx;
		color: #FFFFFF;
		font-size: 18px;
	}
	input{
		width: 50%;
		height: 80rpx;
		background-color: #FFFFFF;
		color: #dddddd;
		border-radius: 15rpx;
		padding: 0rpx 20rpx;
	}
}
// 列表
.list{
	width: 95%;
	margin: 0 auto;
	margin-top: 50rpx;
	.item{
		width: 100%;
		height: 200rpx;
		// background-color: #dddddd;
		border-bottom: 1px solid #dddddd;
		position: relative;
		display: flex;
		align-items: center;
		.go{
			padding: 5rpx;
			position: absolute;
			top: 10%;
			right: 5%;
			background-color: #FFFFFF;
			border: 2px solid #DD6161;
			color: #DD6161;
			font-weight: bold;
		}
		.logo{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			background-color: #F0AD4E;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.content{
			width: 60%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #555555;
			.title{
				width: 90%;
				padding:20rpx 0;
				font-size: 18px;
				font-weight: bold;
			}
			.des{
				width: 90%;
				padding:20rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
}
</style>
